<template>
  <div class="header">
    
    <div class="w">
      <div class="headTop">
          <router-link to="/"><div class="logoBox"><img src="../assets/logo.png" alt=""></div></router-link>
          <!-- <div class="rightBox">
             <div>登录</div>|<div>注册</div>
          </div> -->
      </div>
      <div class="headMain">
          <div class="title"><img src="../assets/title.png" alt=""></div>
          <div class="rightBox">
            <p>河南省教育厅主管</p>
            <p>河南省终身教育协会主办</p>
            <div class="inputBox">
              <el-input v-model="content" placeholder="请输入搜索内容"  prefix-icon="el-icon-search"></el-input>
              <el-button @click="search">搜索</el-button>
            </div>
          </div>
      </div>
      <div class="menu">
        <ul>
           <li v-for="(item,index) in menus" :key="index">
                <router-link :to="{name:item.pathname}" >
                    <div :class="index == current?'active':''" @click="getCurrent(index)" >{{item.name}}</div>
                </router-link>
            </li>
          <!-- <li>新闻资讯</li>
          <li>政策法规</li>
          <li>公共服务</li>
          <li>关于我们</li> -->
        </ul>
      </div>
      <!-- <div class="cenHead">
        <router-link to="/"
          ><div class="leftBox">
            <img src="../assets/yishu.png" alt="" />
            河南省精品在线开放课公共服务平台
          </div></router-link
        >
      
      </div> -->
    </div>
    <!-- <div class="menuBox">
      <div class="w">
        <div class="navBox">
          <ul>
            <li v-for="(item,index) in menus" :key="index">
                <router-link :to="{name:item.pathname}" >
                    <div :class="index == current?'active':''" @click="getCurrent(index)" >{{item.name}}</div>
                </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      current:0,
      content:"",
      menus:[
        {
            name:'首页',
            pathname:'newIndex'
        },
        {
            name:'课程资源',
            pathname:'lesson'
        },
        {
            name:'合作院校',
            pathname:'academyList'
        },
        {
            name:'新闻资讯',
            pathname:'newsList'
        },
        // {
        //     name:'名师',
        //     pathname:'index'
        // },
        
        {
            name:'平台简介',
            pathname:'about'
        }
      ]
    };
  },
  watch:{
    $route(to,from){
      this.current = sessionStorage.getItem('titleIndex')
    }
  },
  mounted(){
    // console.log(1111,sessionStorage.getItem('titleIndex'))
    if(sessionStorage.getItem('titleIndex')){
      this.getCurrent(sessionStorage.getItem('titleIndex'))
    }
  },
  methods: {
      getCurrent(index){
        // console.log(index,this.current)
        sessionStorage.setItem('titleIndex',index)
        this.current = index
      },
      search(){
        this.$router.push('/lesson');
        sessionStorage.setItem('titleIndex',1)
        this.current= 1
        this.content = ""
      }
  },
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 354px;
  background: url(../assets/head.png) no-repeat;
  background-size: 100% 100%;
}
.headTop {
  width: 100%;
  display: flex;
  padding-top: 14px;
  justify-content: space-between;
}
.headTop .logoBox {
  width: 373px;
  height: 41px;
}
.headTop .logoBox img {
  width: 100%;
  height: 100%;
}
.headTop .rightBox {
  width: 100px;
  display: flex;
  justify-content: space-between;
  color: #FFFFFF;
  font-size: 18px;
}
.headMain {
  width: 100%;
  padding-left: 240px;
  padding-top: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.headMain .title {
  width: 538px;
  height: 169px;
  position: relative;
}
.headMain .title img{
  width: 100%;
  height: 100%;
}
.headMain .title::before {
  content: '';
  position: absolute;
  right: -30px;
  top:60px;
  width: 1px;
  height: 63px;
  background-color: #fff;
  box-shadow: 2px 2px 5px 0px #000000;
}
.headMain .rightBox {
  width: 350px;
  padding-top: 51px;
}
.headMain .rightBox p{
  font-size: 20px;
  color: #FFFFFF;
  text-shadow: 2px 2px 5px #000000;
  margin-bottom: 20px;
}
.inputBox {
  position: relative;
  width: 100%;
  height: 35px;
  border-radius: 4px;
  overflow: hidden;
}
/deep/ .inputBox .el-input__inner {
  width: 100%;
  height: 35px;
}
/deep/  .el-input__icon{
  line-height: 38px;
}
.inputBox .el-button {
  position: absolute;
  right: 0;
  top: 0;
  height: 35px;
  border-radius: 0;
  background-color: #2154C1;
  color: #FFFFFF;
  border: none;
  border: 1px solid #fff;
}
.menu ul {
  display: flex;
  justify-content: flex-start;
  margin-top: 37px;
  border-top: 6px solid #ffffff;
}
.menu ul li {
  width: 168px;
  height: 68px;
  line-height: 68px;
  text-align: center;
  
}
.menu ul li div {
  width: 100%;
  height: 100%;
}
.menu ul li a{
  font-size: 22px;
  color: #FFFFFF;
}
.menu ul .active {
  color: #2154C1;
  background-color: #fff;
}
</style>
